<template>
  <el-form ref="dom" :model="form" :rules="rules" status-icon label-width="auto" style="padding: 20px;">
    <el-form-item label="基础关键词" prop="role_name">
      <el-input v-model="dynamicValidateForm.key" />
    </el-form-item>
    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      :label="'关键词' + (index+1)"
      :prop="'domains.' + index + '.value'"
     
    >
      <el-input v-model="domain.value" />
      <el-button class="mt-2" @click.prevent="removeDomain(domain)">
        Delete
      </el-button>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">导出</el-button>
      <el-button type="primary" @click="addDomain()">添加关键词</el-button>
      <el-button @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, defineEmits,  } from 'vue'
// import { KeyWordBatch as adds, } from '../../api/api'
// import { ElMessage } from 'element-plus'
import axios from "axios";
// import { saveAs } from 'file-saver';

import { ElForm, ElFormItem, ElInput } from 'element-plus';
const emit = defineEmits(['item']);
const dom = ref(null);
const form = ref({
})
let num = 1;
const dynamicValidateForm = reactive({
  key: '',
  domains: [
    {
      key: 1,
      value: '',
    },
  ],
})

const rules = reactive({
  user_name: [
    { role_name: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' },
  ],

})

const onSubmit = () => {
  console.log(dynamicValidateForm)
  axios.post('/KeyWordBatch', dynamicValidateForm, {emulateJSON:true,responseType: 'blob'}).then(response => {
    console.log(response)
        // const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // console.log(blob)
        // const link = document.createElement('a');
        // link.href = window.URL.createObjectURL(blob);
        // link.download = 'your-exported-file-name.xlsx';
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
      }).catch(error => {
           const blob = new Blob([error.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        console.log(blob)
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'your-exported-file-name.xlsx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      //   console.log(error.response.data);
      // console.log(error.response.status);
      // console.log(error.response.headers);
        console.error('Error exporting to Excel:', error);
      });
  // dom.value.validate((valid, fields) => {
  //   console.log(valid)
  //   if (valid) {
  //     console.log('submit!', valid)
  //     adds(dynamicValidateForm).then((res) => {
  //       console.log('res', res)
  //       ElMessage({
  //         message: res.msg,
  //         type: 'success',
  //       })
        
        
  //     }).catch(error => {
  //       const { headers, data } = error
  //       console.log(error)
  //       // 创建`Blob` , 用于保存 (输入源)
  //       // let blob = new Blob([error], {
  //       //     // type: headers["content-type"] // 使用来自`PHP` 输出时的`headers` 中已经指定的类型
  //       //     type: 'application/vnd.ms-excel' // 直接手写指定
  //       // })
  //       // // 保存`saveAs`, 使用开源组件`file-saver`, (* 注意headers 中`key 的大小写` *)
  //       // // saveAs(blob, decodeURI(headers['content-disposition'].match(/filename="(.*)"/)[1])) // saveAs(输入源, 输出文件名)
  //       // saveAs(blob, decodeURI('sss.xls')) // saveAs(输入源, 输出文件名)
  //       // const blob = new Blob([error], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  //       // const link = document.createElement('a');
  //       // link.href = window.URL.createObjectURL(blob);
  //       // // link.download = 'your-exported-file-name.xlsx';
  //       // document.body.appendChild(link);
  //       // link.click();
  //       // document.body.removeChild(link);
  //       const link = document.createElement('a');// 创建a标签
  //             let blob = new Blob(['\uFEFF' + error],{type: 'application/vnd.ms-excel;'}); // 设置文件类型并在返回值前加bom头，避免乱码
  //             link.style.display = "none";
  //             link.href = URL.createObjectURL(blob); // 创建URL
  //             link.setAttribute("download", "数据"+ '.xls');
  //             document.body.appendChild(link);
  //             link.click();
  //             document.body.removeChild(link);
  //       // console.error('Error exporting to Excel:', error);
  //     });
  //   } else {
  //     console.log('error submit!', fields)
  //   }
  // })

}
const close = () => {
  form.value = {};
  emit('item', 'false')
}

const addDomain = () => {
  num++
  dynamicValidateForm.domains.push({
    key: 'key'+num,
    value: '',
  })
}
const removeDomain = (item) => {
  num--
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

</script>
